vue

2023-04-02 10:20| 来源: 网络整理| 查看: 265

步骤一：安装插件

npm install xlsx file-saver -S

npm install script-loader -S -D

步骤二：在src新建目录vendor

在vendor新建文件Export2Excel.js

然后将链接中的代码复制到Export2Excel.js

https://github.com/PanJiaChen/vue-element-admin/edit/master/src/vendor/Export2Excel.js

注意：作者用的import 导入，在我的项目中打印XLSX一直是undefined，所以我用了下面的方式

import { saveAs } from 'file-saver' // import XLSX from 'xlsx' const XLSX = require('xlsx');

步骤三：在vue中使用

methods: { exporfFile(){ import('@/vendor/Export2Excel').then(excel => { // 导出的表头名信息，也就是选中列 const tHeader = [ '序号', '企业名称', '区县', '管理类别', '行业类别', '申请类型', '开始时间', '结束时间', '时长', ] // 导出的表头字段名，需要导出表格字段名 const filterVal = [ 'index', 'devcompany', 'name_regiondetail', 'management', 'hyname', 'itemtype', 'start_time', 'end_time', 'time', ] //导出时如果需要序列，增加序列。 this.tableData1.forEach((item, index) => { item.index = index + 1 }) const list = this.tableData1 const data = this.formatJson(filterVal, list) excel.export_json_to_excel({ header: tHeader, //表头必填 data, //具体数据必填,字段名必须用data filename: 'excel-list', //非必填，自定义 autoWidth: true, //非必填 bookType: 'xlsx' //非必填 }) }) }, //处理数据格式将[{}……]处理为@/vendor/Export2Excel需要的[[]……]格式 formatJson(filterVal, jsonData) { return jsonData.map((v) => filterVal.map((j) => v[j])) }, }

注意：数组的格式为数组套数组，且tHeader 元素的数量要和data中列的数量一致，且传递时注意，上面对象中橙色的属性data，一定要用'data'这个字段名，否则传递过去是undefined。

data的格式如下：

[ [1, '标题一 'George',111] [2, '标题二', 'John', 2614,] [3, '标题三', 'Jennifer', 4787, ] ]

【本文地址】

公司简介

联系我们